<template>
  <div class="city-picker">
    <a @click="handleCityVisible">{{curCity}}</a>
    <mt-popup v-model="popupVisible" position="bottom">
      <ul class="city-list">
        <li v-for="item in cityList">
          <label>
            <span>{{item}}</span>
            <input @change="onChangeCity"
                   :value="item"
                   :checked="isChecked(item)"
                   name="city"
                   type="radio">
          </label>
        </li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { ON_CHANGE_NEWS_TYPE } from '../store/constants/eventTypes'

  export default {
    name: 'city-picker',
    props: {
      onChange: Number
    },
    components: {},
    data () {
      return {
        popupVisible: false
      }
    },
    computed: {
      ...mapState({
        cityList: state => state.helper.city,
        curCity: state => state.event.city || '全部'
      })
    },
    methods: {
      fetchCityList () {
        this.$store.dispatch('fetchCityList').then(res => {
//          console.log(res)
        })
      },
      handleCityVisible () {
        this.popupVisible = !this.popupVisible
      },
      isChecked (val) {
        return this.curCity === val
      },
      onChangeCity (e) {
        // 更改城市
        this.$store.commit({
          type: ON_CHANGE_NEWS_TYPE,
          city: e.target.value
        })
        // 重新请求活动列表
        this.$store.dispatch('fetchEventList').then(res => {
          console.log(res)
        })
        this.handleCityVisible()
      }
    },
    created () {
      this.fetchCityList()
    }
  }
</script>

<style lang="scss" scoped>
  .city-picker {
    a{
      color: #fff;
    }
    .city-list{
      color: #333;
      li{
        line-height: 80px;
        padding: 0 20px;
        label{

          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1Px solid #ccc;
          span{
            display: inline-block;
          }
        }
      }

    }
  }
</style>
